import React from 'react'
import { Link, NavLink, Routes, Route } from "react-router-dom";
import './style.less'
import Home from './App/Home/Home'
import Ticket from './App/Ticket/Ticket'
import OnSell from './App/OnSell/OnSell'
import Search from './App/Search/Search'

export default class App extends React.Component {
  state = {
    keyword: null
  }
  setKeyword(e) {
    this.setState({
      keyword:e.target.value
    })
  }
  render() {
    return (
      <div className='App'>
        <header className='header'>
          <div className='container'>
            <h1 className='logo'>阳光沙滩-卷场</h1>
            <nav className='navigation'>
              <NavLink to='/'>发现</NavLink>
              <NavLink to='/ticket'>卷场</NavLink>
              <NavLink to='/onSell'>特惠</NavLink>
            </nav>
            <div className='search'>
              <input type="text" onChange={(e) => this.setKeyword(e)} placeholder='复制(淘宝的标题或者关键字)找优惠劵!' />
              <button>
                <Link to={`/search?keyword=${this.state.keyword}`} >搜索</Link>
              </button>
            </div>
          </div>
        </header>
        <div className='main'>
          <Routes>
            <Route path='/' element={<Home />}></Route>
            <Route path='/ticket' element={<Ticket />}></Route>
            <Route path='/onSell' element={<OnSell />}></Route>
            <Route path='/search' element={<Search />}></Route>
          </Routes>
        </div>
        <footer className='footer'>
          <div className='container'>
            <ul>
              <li>联系我们</li>
              <li>人才招聘</li>
              <li>广告投放</li>
              <li>网店加盟</li>
              <li>常见问题</li>
              <li>友情链接</li>
            </ul>
            <p>©2019 taobaounion.cn 粤IPC备 1209832号-11 code by TrillGates</p>
          </div>
        </footer>
      </div>
    )
  }
}